<template>
	<view class="out">
		<input type="text" v-model="firstName" placeholder="请输入姓"/>
		<input type="text" v-model="lastName" placeholder="请输入名"/>
	</view>
	<view class="name">你的姓名: {{name}}</view>
</template>

<script setup>
import {ref, computed} from 'vue'
const firstName = ref('')
const lastName = ref('')

const name = computed(()=>firstName.value +"-"+ lastName.value)

</script>

<style lang='scss' scoped>
.out{
	padding: 10px 10px;
	input{
		border: 1px solid #ccc;
		height: 40px;
		margin-top: 10px;
		padding: 5px;
	}
}
.name{
	color: #e00;
	font-weight: bold;
	padding-left: 10px;
}
</style>
